<template>
  <!-- 审核管理组件 -->
    <div>
      <el-form class="form" ref="searchForm" :model="searchForm" :inline="true" label-position="right" style="clear: both;overflow: hidden;">
        <el-form-item prop="name">
          <el-input size="small" v-model="searchForm.name" placeholder="请输入协议编号"></el-input>
        </el-form-item>
        <el-form-item prop="customerName">
          <el-input size="small" v-model="searchForm.customerName" placeholder="请输入客户姓名"></el-input>
        </el-form-item>
        <el-form-item prop="approvalStatus" v-if="stepStatusType==2">
          <el-select size="small" v-model="searchForm.approvalStatus" placeholder="请选择审核状态">
            <el-option label="审核中" value="0"></el-option>
            <el-option label="审核通过" value="1"></el-option>
            <el-option label="审核拒绝" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="date">
          <el-date-picker
              size="small"
              v-model="searchForm.date"
              type="datetimerange"
              :shortcuts="shortcuts"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              >

          </el-date-picker>
        </el-form-item>
        <el-form-item style="float: right;margin-right: 0;">
          <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
          <el-button size="small" type="danger" @click="resetForm('searchForm');">清空</el-button>
        </el-form-item>
        <el-row>
<!--        <el-form-item>-->
<!--          <h2 style="color: #0077aa;font-size: 20px;">总计：{{ total }}</h2>-->
<!--        </el-form-item>-->
        </el-row>
      </el-form>
    </div>
</template>

<script>
import local from "@/utils/local";
export default {
  props:{
    // 审核标题
    title: {
      type: String,
      default: ""
    },
    // 审核弹窗
    total: {
      type: Number,
      default: 0
    },
    // 审核弹窗
    stepStatusType: {
      type: Number,
    }
  },
  data() {
    return {
      // title搜索部分
      searchForm: {
        // 搜索部分
        customerName: null,//客户姓名
        date: '',/*日期时间*/
        name: null,
        approvalStatus: "",
        stepStatus: "",
      },
      shortcuts: [{
        text: '最近一周',
        value: (() => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end]
        })()
      }, {
        text: '最近一个月',
        value: (() => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end]
        })()
      }, {
        text: '最近三个月',
        value: (() => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          return [start, end]
        })()
      }],
    };
  },
  methods:{
    // 搜索
    onSubmit() {
      this.$emit("submit",this.searchForm);
    },
    // 重置公共方法
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

  },
  created(){
    // 回车触发搜索事件
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.$emit("submit",that.searchForm);
      }
    };
  }
};
</script>

<style lang="less" scoped>
@import "../assets/style/deep";
/deep/.el-date-editor--datetimerange.el-input__inner {
  width: 360px;
}

</style>
